{% extends 'tend/common/base.html' %}
{% import "tend/macros/_patination.html" as page_macros %}
{% import "tend/macros/_flash.html" as flash_macros %}
{% block content %}
{{flash_macros.flash_msg()}}
<!--轮播图开始-->
{% set banners = get_banners(mtype=top)%}
{% if banners | length > 0 %}
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for r in banners %}
        <li data-target="#carouselExampleIndicators" data-slide-to="{{loop.index}}"
            class="{{'active' if loop.first else ''}}"></li>
        {% endfor %}
    </ol>
    <div class="carousel-inner">
        {% for r in banners %}
        <div class="carousel-item {{'active' if loop.first else ''}}">
            <a href="{{r.url}}">
                <img class="w-100 h-100" src="{{r.img}}" alt="{{r.title}}" style="max-width: 800px; max-height: 400px;">
                <div class="carousel-caption d-none d-md-block">
                    <h5>{{r.title}}</h5>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
{% endif %}
<!--轮播图结束-->
<!--排序方式-->
<div class="text-secondary font-weight-bold py-3 f-15 choice">
    <a class="pb-2 {{ 'active' if request.args.get('st','time') == 'time' else '' }}"
        href="{{url_for('.index', st='time')}}">
        <i class="fa fa-bars mr-1"></i>时间排序</a>
    <a class="pb-2 ml-4 {{ 'active' if request.args.get('st','time') == 'hot' else ''}}"
        href="{{url_for('.index', st='hot')}}">
        <i class="fa fa-fire mr-1"></i>热度排序</a>
</div>
<!--排序方式结束-->
<!--文章列表-->
<div class="summary-list">
    {% set st = request.args.get('st','time') %}
    {% set articles = get_articles(page=request.args.get('page',1),is_page=true, is_hot= (st == 'hot'), per_page=15) %}
    {% for a in articles.items %}

    <div class="article-block">
        <div class="media mb-1 mb-sm-2 p-2 p-lg-3">
            <div class="align-self-center rounded-6 mr-2 mr-lg-3 w-25 modal-open">
                <a href="{{url_for('main.article',name=a.name)}}">
                    <img class="w-100 article-img" src="{{a.thumbnail_img()}}"
                        alt="{{a.title}}" style="width: 250px; height: 150px;">
                </a>
            </div>
            <div class="media-body">
                <div class="meta-container mb-2 f-12">
                    <img class="avatar" src="{{url_for('.static',filename='img/avatar.png')}}" alt="何三">
                    <span>何三</span>
                    <span class="media-date">{{a.publish_time|pretty_date}}</span>
                    <span class="media-tag-list">
                        {% for tag in a.tags.all() %}
                        <a class="media-tag" href="{{url_for('.tag',t=tag.code)}}">{{tag.name}}</a>
                        {% if not loop.last %}
                        <span class="media-tag-i">•</span>
                        {% endif %}
                        {% endfor %}
                    </span>
                </div>
                <h2 class="mt-0 font-weight-bold text-info f-17">
                    <a href="{{url_for('main.article',name=a.name)}}">{{a.title}}</a>
                </h2>
                <p class="d-none d-sm-block mb-2 f-15">
                    {{a.summary|truncate(120,killwords=True,leeway=0) }}
                </p>
                <p class="d-block d-sm-none mb-2 f-15">
                    {{a.summary|truncate(64,killwords=True,leeway=0) }}
                </p>
                <div class="meta-container mb-0 f-12">
                    <a class="cate" href="{{url_for('.category', c=a.category.name)}}" title="查看当前分类下更多文章">
                        <i class="fa fa-book mr-1"></i>{{a.category.title}}</a>
                    <span><i class="fa fa-eye ml-2 mr-1"></i>{{a.vc}}</span>
                    <!-- <a href="/subject/article/TailScale/#comment-block" title="查看文章评论">
                        <i class="fa fa-comments ml-2 mr-1"></i>0</a> -->
                </div>
            </div>
        </div>
    </div>
    {% endfor %}

</div>
<!--文章列表结束-->
<div>
    {{ page_macros.pagination_widget(articles, '.index', st=request.args.get('st','time')) }}
</div>

{% endblock %}